<template>
    <div class="adviser-list" v-loading="loading">
        <div class="input-box" style="position: relative;">
            <div class="user-search">
                <span class="input-title">用户查询</span>
                <!-- <el-tooltip style="cursor:pointer; margin-right: 10px" class="item" effect="dark" placement="top">
                    <div slot="content">可输入 用户ID、手机号、用户昵称、<br>身份证号、托管过的QQ号 来查询、姓名。</div>
                    <i class="el-icon-question"></i>
                </el-tooltip> -->
                <el-input
                    placeholder=""
                    clearable
                    @keyup.enter.native="getList(1)"
                    style="width:500px;"
                    v-model.trim="keyword">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <span class="user-card">
                    <span>可输入 趣ID、手机号、用户昵称、姓名、身份证号、托管过的QQ号 来查询</span>
                </span>
            </div>
            <el-button type="primary" class="btn" @click="getList(1)">查询</el-button>
            
            <span class="input-title" style="margin-left: 10px;">统计时间</span>
            <el-date-picker
                @change="getList(1)"
                style="width: 300px;"
                v-model="date"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <!-- <el-button type="success" class="btn" @click="exportData" style="position: absolute; right: 10px">导出</el-button> -->
        </div>
        <div class="table-box">
            <el-table
                :data="list"
                border
                @sort-change="sortChange"
                style="width: 100%">
                <el-table-column
                    fixed
                    width="90"
                    prop="userId"
                    label="趣ID">
                    <template slot-scope="scope">
                        <span @click="goUserDetail(scope.row.userId)" class="table-btn">{{scope.row.userId}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="160"
                    label="昵称">
                    <template slot-scope="scope">
                        <span>{{scope.row.nickName || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="120"
                    prop="registerDate"
                    label="注册时间">
                    <template slot-scope="scope">
                        <div>{{scope.row.registerDate | timeInit}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="160"
                    label="顾问">
                    <template slot-scope="scope">
                        <div v-if="scope.row.userAdviseInfoVo">
                            <p>顾问：{{ scope.row.userAdviseInfoVo.adviseUserId }} </p>
                            <p>{{ scope.row.userAdviseInfoVo.adviseUserName}}</p></div>
                        <p v-else>-</p>
                    </template>
                </el-table-column>
                <el-table-column
                    width="140"
                    sortable="custom"
                    prop="selectNum"
                    label="使用筛选次数">
                    <template slot-scope="scope">
                        <span>{{scope.row.selectNum || '0'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="viewNum"
                    sortable="custom"
                    width="160"
                    label="浏览账号数">
                    <template slot-scope="scope">
                        <span>{{scope.row.viewNum || 0}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    sortable="custom"
                    prop="collectNum"
                    label="收藏数">
                    <template slot-scope="scope">
                        <span>{{scope.row.collectNum || 0}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    sortable="custom"
                    prop="chatNum"
                    label="咨询数">
                    <template slot-scope="scope">
                        <span>{{scope.row.chatNum || 0}} </span>
                    </template>
                </el-table-column>
                <el-table-column
                    sortable="custom"
                    prop="orderNum"
                    label="下单数">
                    <template slot-scope="scope">
                        <span>{{scope.row.orderNum || 0}} </span>
                    </template>
                </el-table-column>
                <el-table-column
                    sortable="custom"
                    prop="buyNum"
                    label="已购账号">
                    <template slot-scope="scope">
                        <span>{{scope.row.buyNum || '0'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    sortable="custom"
                    prop="sellingNum"
                    label="在售账号">
                    <template slot-scope="scope">
                        <span>{{scope.row.sellingNum || 0}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column
                    sortable="custom"
                    prop="sellOutNum"
                    label="已售账号">
                    <template slot-scope="scope">
                        <span>{{scope.row.sellOutNum || '0'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="150"
                    sortable="custom"
                    prop="accountNum"
                    label="托管账号数">
                    <template slot-scope="scope">
                        <span>{{scope.row.accountNum || 0}} </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { formatDate, conversion, getDaysTime } from '@/utils/utils'
import { export2Excel } from '@/excel/util'
let domain = location.origin + '/'

export default {
    data () {
        return {
            loading: false,
            list: [],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            keyword: '',
            userId: '',
            date: [
                getDaysTime(-7),
                formatDate(new Date().getTime(), 'YYYY-MM-DD')
            ], // 时间
            type: '',
            order: '',
        }
    },
    created () {
        this.keyword = this.$route.query.keyword || ''
        this.getList(1)
    },

    methods: {
        // 打印
        exportData() {
            this.columns = [{
                title: '趣Id', key: 'userId'
            },
            // {
            //     title: '昵称', key: 'nickName'
            // },
            {
                title: '注册时间', key: 'registerDate'
            },
            {
                title: '顾问ID', key: 'adviseUserId'
            },
            {
                title: '顾问名称', key: 'adviseUserName'
            },
            {
                title: '使用筛选次数', key: 'selectNum'
            },
            {
                title: '浏览账号次数', key: 'viewNum'
            },
            {
                title: '收藏数', key: 'collectNum'
            },
            {
                title: '咨询数', key: 'chatNum'
            },
            {
                title: '下单数', key: 'orderNum'
            },
            {
                title: '已购账号', key: 'buyNum'
            },
            {
                title: '在售账号', key: 'sellingNum'
            },
            {
                title: '已售账号', key: 'sellOutNum'
            },
            {
                title: '托管账号数', key: 'accountNum'
            },
            {
                title: '用户主页链接', key: 'userLink'
            }
            ]
            this.getList(1, true)
        },
        async getList (num, flag) {
            if (this.loading) return
            this.loading = true
            this.pageNum = num

            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }
            // 打印
            if (flag) {
                params.pageSize = 1000000
            }
            if (this.type) params.sortField = this.type
            if (this.sort) params.sort = this.sort

            if (this.date && this.date.length) {
                params.startTime = this.date[0]
                params.endTime = this.date[1]
            }

            if (this.keyword) {
                params.keyword = this.keyword
            }

            let res = await this.$http.get('/user/adviseUsers', {
                params
            })
            if (res.code === '0') {
                // 打印
                if (flag) {
                    res.data.list && res.data.list.forEach((item) => {
                        item.userLink = `${domain}work/quDeal/quDealCustomerDetail?id=${item.userId}`
                        item.adviseUserId = item.userAdviseInfoVo && item.userAdviseInfoVo.adviseUserId
                        item.adviseUserName = item.userAdviseInfoVo && item.userAdviseInfoVo.adviseUserName
                    })
                    export2Excel(this.columns, res.data.list, '顾问模式-用户列表')
                } else {
                    this.list = res.data.list
                    this.total = res.data.totalRow
                }
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        sizeChange (val) {
            this.pageSize = val
            this.getList(1)
        },

        pageChange (val) {
            this.getList(val)
        },

        // 后端排序
        sortChange ({ column, prop, order }) {
            console.log(prop, '000000')
            this.sort = order || ''
            // 如果没有 sort prop 置为空
            if (!this.sort) {
                this.type = null
            } else {
                if (this.sort === 'ascending') {
                    this.sort = 'asc'
                } else {
                    this.sort = 'desc'
                }
                this.type = prop
            }
            this.getList(1)
        },

        // 查看用户详情
        goUserDetail (id) {
            const { href } = this.$router.resolve({
                path: `/quDeal/quDealCustomerDetail`,
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        },

        // 数字转换
        conversion (val) {
            return conversion(val)
        }
    },

    filters: {
        timeInit (val) {
            if (val) {
                return formatDate(val, 'YYYY-MM-DD')
            } else {
                return '-'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .adviser-list {
        .input-wrap {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 30px;
            margin-bottom: 20px;
            .input-in {
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
        }
        .input-title {
            margin-right: 10px;
        }
        .input-box {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 60px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .user-search {
                position: relative;
                .user-card {
                    position: absolute;
                    bottom: -60px;
                    left: 40px;
                    display: inline-block;
                    border-radius: 4px;
                    border: solid 1px #00ba45;
                    background-color: #eefff4;
                    font-size: 12px;
                    font-weight: 500;
                    color: #999eae;
                    margin: 18px 0 20px 30px;
                    padding: 5px 29px;
                    &:before {
                        content: '';
                        position: absolute;
                        top: -7px;
                        left: 35px;
                        width: 0;
                        height: 0;
                        border-left: 7px solid transparent;
                        border-right: 7px solid transparent;
                        border-bottom: 7px solid #00ba45;
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        top: -5px;
                        left: 35px;
                        width: 0;
                        height: 0;
                        border-left: 7px solid transparent;
                        border-right: 7px solid transparent;
                        border-bottom: 7px solid #eefff4;
                    }
                }
            }
            
            .btn {
                margin-left: 10px;
            }
        }
        .table-box {
            margin: 20px 0;
            .table-btn {
                cursor: pointer;
                color: #409EFF;
                font-size: 13px;
                font-weight: 500;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
